<template>
  <div id="step-form-con" class="g-step-form-page">
    <g-banner :title="'分步表单（过滤器应用）'" :des="'用于拆分较长的表单页面，使步骤明了。预览框中的字典使用了过滤器进行展示'"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title">分步表单</h2>
      </div>
    </a-affix>
    <div class="g-box">
      <div class="step-con">
        <el-steps :active="step" class="g-step" align-center style="margin-bottom: 30px">
          <el-step title="第1步" description="填写会议基础信息" icon="el-icon-circle-plus"></el-step>
          <el-step title="第2步" description="填写会议高级信息" icon="el-icon-edit"></el-step>
          <el-step title="第3步" description="确认信息" icon="el-icon-s-check"></el-step>
          <el-step title="第4步" description="完成" icon="el-icon-success"></el-step>
        </el-steps>
        <el-form :model="meeting" label-width="120px" class="step-item" :rules="formRules" ref="form">
          <!-- 第一步 -->
          <div v-if="step == 0">
            <el-form-item label="会议名称" prop="meetingName">
              <el-input v-model="meeting.meetingName" placeholder="请输入会议名称" class="g-input-width"></el-input>
            </el-form-item>
            <el-form-item label="会议内容" prop="meetingContent">
              <el-input v-model="meeting.meetingContent" placeholder="请输入会议内容" type="textarea" :rows="5" class="g-input-width"></el-input>
            </el-form-item>
            <el-form-item label="起止时间" prop="meetingDuration">
              <el-date-picker v-model="meeting.meetingDuration.meetingStart" type="datetime" 
                placeholder="请输入开始时间" style="width: 170px;" value-format="yyyy年MM月dd日 hh:mm:ss"></el-date-picker>
              <span style="margin: 0 10px;">至</span>
              <el-date-picker v-model="meeting.meetingDuration.meetingEnd" type="datetime" 
                placeholder="请输入结束时间" style="width: 170px;" value-format="yyyy年MM月dd日 hh:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item label="会议地点" prop="meetingSite">
              <el-select v-model="meeting.meetingSite" placeholder="请输入会议地点" class="g-input-width">
                <el-option value="601" label="601"></el-option>
                <el-option value="604" label="604"></el-option>
                <el-option value="605" label="605"></el-option>
                <el-option value="608" label="608"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="参会者" prop="meetingParticipant">
              <el-select v-model="meeting.meetingParticipant" placeholder="请选择参会者" class="g-input-width" multiple>
                <el-option value="赵先生" label="赵先生"></el-option>
                <el-option value="钱先生" label="钱先生"></el-option>
                <el-option value="孙女士" label="孙女士"></el-option>
                <el-option value="李先生" label="李先生"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="视频支持" prop="meetingVideo">
              <el-radio :label="true" v-model="meeting.meetingVideo">需要</el-radio>
              <el-radio :label="false" v-model="meeting.meetingVideo">不需要</el-radio>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">保存</el-button>
              <el-button @click="step1Next">下一步</el-button>
              <el-button>返回</el-button>
            </el-form-item>
          </div>
          <!-- 第二步 -->
          <div v-else-if="step == 1">
            <el-form-item label="主要行业应用" prop="industry">
              <el-select v-model="industry" placeholder="请选择分类" class="g-input-width">
                <el-option value="0" label="政府行业"></el-option>
                <el-option value="1" label="医疗行业"></el-option>
              </el-select>
              <el-checkbox-group v-model="meeting.industry" style="margin-top: 10px" class="g-checkbox">
                <el-checkbox label="市场监管" border class="label"></el-checkbox>
                <el-checkbox label="应急管理" border class="label"></el-checkbox>
                <el-checkbox label="自然资源" border class="label"></el-checkbox>
                <el-checkbox label="党政民生" border class="label"></el-checkbox>
                <el-checkbox label="空间大数据" border class="label"></el-checkbox>
                <el-checkbox label="人工智能" border class="label"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="收款账户" prop="receiptAccount">
              <el-input placeholder="请输入收款账户" v-model="meeting.receiptAccount" class="g-input-width g-input-prepend">
                <el-select v-model="wayRecipt" slot="prepend" placeholder="收款方式">
                  <el-option label="微信" value="0"></el-option>
                  <el-option label="支付宝" value="1"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
            <el-form-item label="紧急程度" prop="urgencyLevel">
              <el-radio v-model="meeting.urgencyLevel" label="0">
                <el-tag size="small" type="danger">紧急</el-tag>
              </el-radio>
              <el-radio v-model="meeting.urgencyLevel" label="1">
                <el-tag size="small" type="primary">急</el-tag>
              </el-radio>
              <el-radio v-model="meeting.urgencyLevel" label="2">
                <el-tag size="small" type="success">一般</el-tag>
              </el-radio>
            </el-form-item>
            <el-form-item label="地区" prop="region">
              <el-cascader v-model="meeting.region" :options="regionOptions" class="g-input-width"></el-cascader>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="meeting.remark" :rows="10" placeholder="请输入备注"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">保存</el-button>
              <el-button @click="step2Last">上一步</el-button>
              <el-button @click="step2Next">下一步</el-button>
              <el-button>返回</el-button>
            </el-form-item>
          </div>
          <!-- 第三步 -->
          <div v-if="step == 2">
            <div class="g-form-title">提交信息</div>
            <table class="g-form-detail-item" border="1">
              <tr>
                <td>会议名称</td>
                <td>{{meeting.meetingName}}</td>
              </tr>
              <tr>
                <td>会议内容</td>
                <td>{{meeting.meetingContent}}</td>
              </tr>
              <tr>
                <td>起止时间</td>
                <td>{{meeting.meetingDuration.meetingStart}} - {{meeting.meetingDuration.meetingEnd}}</td>
              </tr>
              <tr>
                <td>会议地点</td>
                <td>{{meeting.meetingSite}}</td>
              </tr>
              <tr>
                <td>参会者</td>
                <td><span v-for="item in meeting.meetingParticipant" :key="item">{{item}}&nbsp;</span></td>
              </tr>
              <tr>
                <td>视频支持</td>
                <td>{{meeting.meetingVideo|meetingVideoFormatter}}</td>
              </tr>
              <tr>
                <td>主要行业</td>
                <td><span v-for="item in meeting.industry" :key="item">{{item}}&nbsp;</span></td>
              </tr>
              <tr>
                <td>收款账户</td>
                <td>{{wayRecipt|reciptFormatter}}</td>
              </tr>
              <tr>
                <td>紧急程度</td>
                <td>{{meeting.urgencyLevel|urgencyLevelFormatter}}</td>
              </tr>
              <tr>
                <td>地区</td>
                <td><span v-for="item in meeting.region" :key="item">{{item}}&nbsp;</span></td>
              </tr>
              <tr>
                <td>备注</td>
                <td>{{meeting.remark}}</td>
              </tr>
            </table>
            <el-button type="primary">保存</el-button>
            <el-button @click="step3Last">上一步</el-button>
            <el-button @click="step3Next" type="primary" :loading="buttonLoading">确认信息</el-button>
            <el-button>返回</el-button>
          </div>
          <div v-if="step == 3" class="complete-con">
            <i class="el-icon-success"></i>
            <h3>填写成功</h3>
            <p>预计两小时内得到审批结果</p><br>
            <el-button type="primary">完成</el-button>
          </div>
        </el-form>
      </div>
      <div class="preview-con">
        <div class="g-form-title">概览</div>
        <table>
          <tr>
            <td>会议名称</td>
            <td>{{meeting.meetingName}}</td>
          </tr>
          <tr>
            <td>会议内容</td>
            <td>{{meeting.meetingContent}}</td>
          </tr>
          <tr>
            <td>起止时间</td>
            <td>{{meeting.meetingDuration.meetingStart}} - {{meeting.meetingDuration.meetingEnd}}</td>
          </tr>
          <tr>
            <td>会议地点</td>
            <td>{{meeting.meetingSite}}</td>
          </tr>
          <tr>
            <td>参会者</td>
            <td><span v-for="item in meeting.meetingParticipant" :key="item">{{item}}&nbsp;</span></td>
          </tr>
          <tr>
            <td>视频支持</td>
            <td>{{meeting.meetingVideo|meetingVideoFormatter}}</td>
          </tr>
          <tr>
            <td>主要行业</td>
            <td><span v-for="item in meeting.industry" :key="item">{{item}}&nbsp;</span></td>
          </tr>
          <tr>
            <td>收款账户</td>
            <td>{{wayRecipt|reciptFormatter}}</td>
          </tr>
          <tr>
            <td>紧急程度</td>
            <td>{{meeting.urgencyLevel|urgencyLevelFormatter}}</td>
          </tr>
          <tr>
            <td>地区</td>
            <td><span v-for="item in meeting.region" :key="item">{{item}}&nbsp;</span></td>
          </tr>
          <tr>
            <td>备注</td>
            <td>{{meeting.remark}}</td>
          </tr>
        </table>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</template>
<script>
import { regionOptions } from '@/data/data'
import { getScrollingCon } from '@/util/common'
export default {
  data() {
    return {
      step: 0,

      meeting: {
        meetingName: '',
        meetingContent: '',
        meetingDuration: {
          meetingStart: '',
          meetingEnd: '',
        },
        meetingSite: '',
        meetingParticipant: [],
        meetingVideo: true,
        industry: [],
        receiptAccount: '',
        urgencyLevel: '0',
        region: null,
        remark: '',
      },
      industry: null,
      wayRecipt: '1',
      regionOptions,
      formRules: {
        meetingName: [
          { required: true, message: '请输入会议名称', trigger: 'blur' }
        ],
        meetingContent: [
          { required: true, message: '请输入会议内容', trigger: 'blur' }
        ],
        meetingDuration: [
          { 
            validator: (rule, value, cb) => value.meetingStart == '' || value.meetingEnd == ''?cb(new Error()):cb(), 
            message: '请输入起止时间', 
            trigger: 'blur',
          }
        ],
        region: [
          { required: true, message: '请选择地区', trigger: 'blur' }
        ]
      },
      buttonLoading: false,
    }
  },
  filters: {
    meetingVideoFormatter(value) {
      return value?'需要':'不需要'
    },
    reciptFormatter(value) {
      return value == '1'?'支付宝':'微信'
    },
  },
  methods: {
    getScrollingCon,
    handleSubmit() {
      this.$refs.form.validate((isValid) => {
        if (isValid) {
          return true
        } else {
          this.$message.warning('请检查表单项')
          return false
        }
      })
    },
    // 第一步-下一步
    step1Next() {
      this.$refs.form.validate((isValid) => {
        if (isValid) {
          this.step++
        } else {
          this.$message.warning('请检查表单项')
          return false
        }
      })
    },
    step2Last() {
      this.step--
    },
    step2Next() {
      this.$refs.form.validate((isValid) => {
        if (isValid) {
          this.step++
        } else {
          this.$message.warning('请检查表单项')
          return false
        }
      })
    },
    step3Last() {
      this.step--
    },
    step3Next() {
      this.buttonLoading = true
      setTimeout(()=>{
        this.buttonLoading = false
        this.step++
      }, 1500)
    }
  }
}
</script>
<style lang="scss" scoped>
.complete-con {
  text-align: center;
  i {
    font-size: 120px;
    color: #44b891;
  }
}
</style>